 <template>
  <div>
    <header>
      <span>X</span>
      <span>帮助</span>
    </header>
    <main>
      <p>欢迎登录美团</p>
      <div class="login">
        <input type="text" placeholder="请输入手机号" v-model="tel" />
        <input type="password" placeholder="请输入密码" v-model="posw" />
        <span>+86</span>
      </div>
      <div class="yz">
        <input type="checkbox" v-model="o" />
        <p @click="dl">登录</p>
      </div>
    </main>
    <footer></footer>
  </div>
</template>
 <script>
export default {
  data() {
    return {
      tel: "",
      bool: "",
      posw: "",
      pob: "",
      o: "",
    };
  },
  methods: {
    dl() {
      var edg = /^1[3456789]\d{9}$/;
      this.bool = edg.test(this.tel);
      var edgp = /^[a-zA-Z_]\d{5,11}$/;
      this.pob = edgp.test(this.posw);
      this.$router.push({
        path: "/my",
        query: {
          bool: this.bool,
          pob: this.pob,
          check: this.o,
          tel: this.tel,
          posw: this.posw,
        },
      });
      this.$store.commit("dl", { tel: this.tel, pas: this.posw });
      localStorage.setItem("tel",this.tel)
    },
  },
  computed: {},
};
</script>
 <style lang='css' scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
header {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}
main {
  flex: 1;
  padding-top: 5rem;
  padding-left: 2rem;
}
main p:nth-child(1) {
  font-size: 25px;
  color: #454545;
  margin-bottom: 30px;
}
.login {
  width: 90%;
  height: 5rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.login input {
  width: 100%;
  height: 2rem;
  border: none;
  border-bottom: 1px solid #c8c8c8;
  outline: none;
  padding-left: 3rem;
}
input::placeholder {
  font-size: 18px;
  color: #d6d6d6;
}
.login input:nth-child(2) {
  margin-top: 1.2rem;
}
.login span:nth-of-type(1) {
  position: absolute;
  top: 0px;
}
.yz {
  margin-top: 4rem;
  width: 90%;
  height: 7rem;
  display: flex;
  flex-direction: column;
}
.yz p {
  margin-top: 3rem;
  border-radius: 8px;
  width: 100%;
  height: 2rem;
  background: #fff6cd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>